Introducing JSX
ReactではUIをJSXを使って記述することを推奨している
JSXはReact "elements" を生成する
次のセクションでDOMのレンダリングについて触れる
Why JSX?
レンダリングロジックの隠蔽
"components" と呼ばれる単位でUIとロジックの関心事の分離を行う
コンポーネントについても次のセクションで
ReactでJSXは必須ではない
だけど、JSXのほうがReactからのエラーや警告メッセージがより便利に表示される
Embedding Expressions in JSX
{}で囲まれた中に、JavaScriptの表現でValidなものを書ける
JSXでは複数行で記述するほうがよい
過去、JSの自動セミコロン挿入問題があったらしい
code:JavaScript
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
JSX is an Expression Too
JSXはコンパイルによって関数に展開されるため、ifやforの中に置いたり、変数を適用したりできる
Specifying Attributes with JSX
属性にダブルクォート(固定値)と{}(変数)を混在させない
code:JavaScript
// 固定値の例
const element = <div tabIndex="0"></div>;
// 変数の例
const element = <img src={user.avatarUrl}></img>;
JSXはHTMLよりもJSに近いため、属性はcamelCaseで記述する
class → className
tabindex → tabIndex
Specifying Children with JSX
子要素がない場合、/>で閉じることができる
子要素がいる場合、ネストすることができる
code:JavaScript
// 子要素がない場合
const element = <img src={user.avatarUrl} />;
// 子要素がいる場合
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSX Prevents Injection Attacks
XSS対策のため、{}での変数展開時、デフォルトでエスケープされる
code:JavaScript
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
JSX Represents Objects
以下の2通りの書き方は同じ
code:JavaScript
// JSX
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// createElement
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
エディタにコードハイライトプラグインを入れるといいよ